<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>案例-表单校验</title>
    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 105px;
            background-image: url(0.jpg);
        }

        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>
    <!--
    表单校验
        1. 两次密码输入一致
        2. 邮箱格式正确
        3. 手机号格式正确
        4. 提交表单时校验表单项是否合法.
    总结:
        form表单的 onsubmit 事件 表单提交之前触发
    -->
</head>
<body>
<div class="regist_bg">
    <div class="regist">
        <form action="http://www.baidu.com" id="myForm">
            <table width="700px" height="350px">
                <tr>
                    <td colspan="3">
                        <font color="#3164af">会员注册</font> USER REGISTER
                    </td>
                </tr>
                <tr>
                    <td align="right">用户名</td>
                    <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
                            id="loginnamewarn" class="warn">用户名长度需要为6—10之间</span></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/> <span id="pswNull" class="warn">密码不能为空</span></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
                            id="pwdwarn" class="warn">密码不一致</span></td>
                </tr>
                <tr>
                    <td align="right">Email</td>
                    <td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn"
                                                                                                 class="warn">邮箱格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">姓名</td>
                    <td colspan="2"><input id="name" name="text" name="username" size="50"/><span id="namewarn"
                                                                                                  class="warn">姓名不能为空</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td colspan="2">
                        <input type="radio" name="gender" value="男" checked="checked"/>男
                        <input type="radio" name="gender" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td align="right">电话号码</td>
                    <td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
                                                                                                 class="warn">手机格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">所在地</td>
                    <td colspan="3">
                        <select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                            <option value="">----请-选-择-省----</option>
                            <!--                            <option value="0">北京</option>-->
                            <!--                            <option value="1">辽宁</option>-->
                            <!--                            <option value="2">江苏</option>-->
                        </select>
                        <select id="cityId" style="width:150px">
                            <option>----请-选-择-市----</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="80" align="right">验证码</td>
                    <td width="100"><input type="text" name="verifyCode"/></td>
                    <td><img src="1.jpg" width="80" height="30"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input id="rebtn" type="submit" value="注册"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<script>
    /*
    * 已学事件:
    *       onclick
    * 事件
    *   1. onblur 失去焦点时触发
    *
    *   2. onsubmit 当表单提交的时候
    *       1). 注册位置
    *           注册在form标签上,由form表单中onsubmit按钮触发
    *       2). 返回值
    *           return true : 表示允许提交
    *           return false : 表示不允许提交
    * */
    /*  var loginName = document.getElementById("loginnameId");
      loginName.onblur = function () {
          console.log("hehe");
      }

      var myForm = document.getElementById("myForm");

      myForm.onsubmit = function () {
          console.log("xixi");
          return true;
      }*/
</script>
<script>
    //用户名长度为6-10之间
    let userName = /^[a-zA-Z0-9]{6,10}$/;
    var user = document.getElementById("loginnameId");
    // // var array = [];
    // var length = user.length;
    // // console.log(user);
    // console.log(user.length);
    // // console.log(string.length);
    function us() {
        if (userName.test(user.value)) {
            document.getElementById("loginnamewarn").style.display = "none";
            return true;
        } else {
            document.getElementById("loginnamewarn").style.display = "inline";
            return false;
        }
    }

    // length.onblur = us;
    user.onblur = us;

    //密码验证
    let pow = /\S/;
    var p1 = document.getElementById("pwd1");
    var p2 = document.getElementById("pwd2");

    function f() {
        if (pow.test(p1.value && p2.value)) {
            document.getElementById("pswNull").style.display ="none";
            if (p1.value == p2.value) {
                document.getElementById("pwdwarn").style.display = "none";
                return true;
            } else {
                document.getElementById("pwdwarn").style.display = "inline";
                return false;
            }
        } else {
            document.getElementById("pswNull").style.display ="inline";
        }
    }

    p2.onblur = f;
    //邮箱验证
    let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
    var emailId = document.getElementById("email");

    function eml() {
        if (emailReg.test(emailId.value)) {
            document.getElementById("emailwarn").style.display = "none";
            return true;
        } else {
            document.getElementById("emailwarn").style.display = "inline";
            return false;
        }
    }

    emailId.onblur = eml;
    //姓名判断
    let name = /\S/;
    var nameId = document.getElementById("name");

    function nam() {
        if (name.test(nameId.value)) {
            document.getElementById("namewarn").style.display = "none";
            return true;
        } else {
            document.getElementById("namewarn").style.display = "inline";
            return false;
        }
    }

    nameId.onblur = nam;
    //电话号码判断
    let PHone = /^1[34578]\d{9}$/;
    var phonrId = document.getElementById("phone");

    function pho() {
        if (PHone.test(phonrId.value)) {
            document.getElementById("phonewarn").style.display = "none";
            return true;
        } else {
            document.getElementById("phonewarn").style.display = "inline";
            return false;
        }
    }

    phonrId.onblur = pho;

    //所在地判断
    var bj = ["一环", "二环", "三环"];
    var ln = ["辽一", "辽二", "辽三"];
    var js = ["一江", "二江", "三江"];
    var cityDatas = [bj, ln, js];
    var sf = ["北京", "辽宁", "江苏"];//sf为省份
    var province = document.getElementById("provinceId");
    for (let index in sf) {
        province.innerHTML += "<option value='" + index + "' >" + sf[index] + "</option>";
    }

    var elementById = document.getElementById("provinceId");

    function address() {
        var cityDatum = cityDatas[elementById.value];
        var citys = document.getElementById("cityId");
        citys.innerHTML = '<option value="">----请-选-择-市----</option>';
        for (let i = 0; i < cityDatum.length; i++) {
            citys.innerHTML += "<option value=''>" + cityDatum[i] + "</option>";
        }
    }

    elementById.onchange = address;
    //提交表单判断
    document.getElementById("myForm").onsubmit = function () {
        if (us()==true && f()==true && eml()==true && nam()==true && pho()==true) {
            return true;
        } else {
            return false;
        }
    }
</script>

</body>
</html>
